<template>
  <div class="page">
    <m-header :title="type=='buy'?langText&&langText.newbuyorder:langText&&langText.newsellorder" :canback="Boolean(1)"></m-header>
    <section class="body">
      <form class="tj-form">
        <div class="form-item" v-if="type!='buy'">
          <label for="name" class="title">{{langText&&langText.quantity}}</label>
          <input
            type="number"
            :placeholder="langText&&langText.singlelineinput"
            v-model="form.amount1"
            class="inp"
          />
        </div>
        <div class="form-item" v-else>
          <label for="name" class="title">{{langText&&langText.quantity}}</label>
          <input
            type="number"
            :placeholder="langText&&langText.singlelineinput"
            v-model="form.amount1"
            class="inp"
          />
        </div>
        <div class="form-item">
          <label for="name" class="title">最低限额</label>
          <input
            type="number"
            placeholder="请输入最低限额"
            v-model="form.minimum"
            class="inp"
          />
        </div>
        <div class="form-item" v-show="type!='buy'">
          <label for="name" class="title">手续费</label>
          <input
            type="number"
            placeholder="手续费"
            :value="fee"
            class="inp"
            readonly
          />
        </div>
        <div class="form-item">
          <label for="name" class="title">{{langText&&langText.unitprice}}({{langText&&langText.usdt}})</label>
          <input
            type="number"
            :placeholder="config&&type=='buy'?config.price.otc_income[0].name+'~'+config.price.otc_income[1].name:config.price.otc_out[0].name+'~'+config.price.otc_out[1].name"
            v-model="form.uprice"
            class="inp"
          />
        </div>
        <div class="form-item">
          <label for="name" class="title">{{langText&&langText.totalamount}}({{langText&&langText.usdt}})</label>
          <input
            type="number"
            :placeholder="form.uprice*form.amount1"
            readonly
            class="inp"
          />
        </div>
        <div class="form-item">
          <label for="name" class="title">{{langText&&langText.paypwd}}</label>
          <input
            type="password"
            :placeholder="langText&&langText.ptpassword"
            v-model="form.pwd"
            class="inp"
            maxlength="6"
          />
        </div>
      </form>
      <button type="button" class="btn-submit btn-origin sm-btn" @click="addBill">{{type=='buy'?langText&&langText.buynow:langText&&langText.sellnow}}</button>
    </section>
    <m-load ref="load"></m-load>
  </div>
</template>
<script>
import { Trade,Business } from "@/server/server.js";
import { Util, Load } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
import { MyTxt,TradeTxt } from "@/assets/commonjs/lan.js";

export default {
  components: {},
  data() {
    return {
      pwd:null,
      type:null,
      pwd:null,
      form:{
        amount1:null,
        uprice:null,
        pwd:null,
        minimum:null
      },
      langText:null,
      allTxt:null,
      config:{},
    };
  },
  created() {
    this.getBusConfig();
  },
  mounted(){
    this.initDate();
  },
  computed: {
    ...mapGetters(['uid','api','getLangId']),
    'fee'(){
      return Number(this.config&&this.config.otc_charge*0.01*this.form.amount1||0).toFixed(2) 
    }
  },
  methods: {
    initDate(){
      this.type = this.$route.query.type;
      this.allTxt = Object.assign({},MyTxt,TradeTxt)
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('tradingcenter')))
    },
    /**
     * 币种参数
     */
    getBusConfig(){
      Business.getBusConfig(this.form).then(res=>{
        if(res.code ==1){
          this.config = res.data;
        }else return mui.toast(res.msg);
      })
    },
    addBill(){
      // console.log('form',this.form);return;
      if(this.type=='buy'){
        this.createBuy();
      }else{
        this.createSell();
      }
    },
    /**
     * 创建买单
     */
    createBuy(){
      let msg = Util.isValidate(this.form);
      if(msg) return mui.toast(msg);
      if(this.form.amount1) {
        this.form.amount2 = this.form.amount1;
        delete this.form.amount1;
      }
      Business.createBuy(this.form).then(res=>{
        if(res.code ==1){
          mui.toast(res.msg);
          setTimeout(() => {
            this.$router.go(-1);
          }, 200);
        }else return mui.toast(res.msg);
      })
    },
    /**
     * 创建卖单
     */
    createSell(){
      let msg = Util.isValidate(this.form);
      if(msg) return mui.toast(msg);
      Business.createSell(this.form).then(res=>{
        if(res.code ==1){
          mui.toast(res.msg);
          setTimeout(() => {
            this.$router.go(-1);
          }, 200);
        }else return mui.toast(res.msg);
      })
    },
    buyOrder(){
      Trade.buyOrder(this.form).then(res=>{
        mui.toast(res.msg)
        if(res.code==1){
          setTimeout(()=>{ this.$router.go(-1) },500)
        }
      })
    },
    sellOrder(){
      Trade.sellOrder(this.form).then(res=>{
        mui.toast(res.msg)
        if(res.code==1){
          setTimeout(()=>{ this.$router.go(-1) },500)
        }
      })
    },
  }
};
</script>

<style scoped lang="less">
@import "~link-less";
.body {
  background-color: @bg-color;
  .tj-form {
    margin-top: 0;
    // background:rgba(255,255,255,1);
    background:#fff;
    box-shadow:0px 1px 0px 0px rgba(219,218,218,0.5);
    border-radius:10px;
    margin: 20px;
    padding: 30px 20px;
    .form-item {
      display: flex;
      justify-content: space-between;
      margin-top: 26px;
      &:first-child{margin-top: 0}
      .title{
        width: 250px;
        line-height: 80px;
        font-size:28px;
        font-weight:400;
        color:rgba(51,51,51,1);
      }
      .inp{
        // flex: 1;
        padding: 0 !important;
        margin: 0;
        width: 420px;
        background:rgba(238,238,238,1);
        border-radius:10px;
        border: none;
        padding-left: 30px !important;
        color: #000;
      }
    }
  }
  .sm-btn{
    width: 710px;
    height: 88px;
    line-height: 88px;
    text-align: center;
    margin-left: 20px;
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style >


